import React from 'react'
import {Collapse} from 'antd';
import moment from 'moment';
const {Panel} = Collapse;
import {Table, Divider, Tag} from 'antd';
import './index.less';
import axios from 'axios';
import {PATH,IP} from '../../../utils/urls';
import {getResourceNameByType} from '../../../utils/config';
import BreadcrumbCustom from "../../../components/BreadcrumbCustom";

//设备菜单标题
const columns0 = [
    {
        title: '序号',
        dataIndex: 'number',
        key: 'number',
    },
    {
        title: 'appid',
        dataIndex: 'appid',
        key: 'appid',
    },
    {
        title: 'IP',
        dataIndex: 'IP',
        key: 'IP',
    },
    {
        title: 'CPU利用率',
        key: 'cpu',
        dataIndex: 'cpu',
    },
    {
        title: '内存利用率',
        key: 'storage',
        dataIndex: 'storage',
    },
    {
        title: '硬盘利用率',
        key: 'caliche',
        dataIndex: 'caliche',
    },
    {
        title: '网络IO',
        key: 'network',
        dataIndex: 'network',
    },
    {
        title: '状态',
        key: 'state',
        dataIndex: 'state',
    },
    {
        title: '更新时间',
        key: 'updatetime',
        dataIndex: 'updatetime',
    }
];
//设备列表详细信息
const resourceArray = [];
export default class HardWareMonitor extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            resourceArray: resourceArray,//设备资源列表
            columns0: columns0,//设备菜单标题
            currentHardIndex: -1,//当前选中设备资源的索引,
            hostname:""//ip地址
        }
        this.getTimeByTemp = this.getTimeByTemp.bind(this);
        this.lock = false;
    }

    componentDidMount() {
        //获取设备列表
        this.getHardWareResource();
    }

    /**
     * 获取设备列表
     * @returns
     */
    getHardWareResource() {
        axios.post(PATH.hardwareResource, {})
            .then(response => {
                console.log(response);
                if (response.data.code == 0) {
                    let dataArray = response.data.data;
                    let newResourceArray = [];
                    for (let i = 0; i < dataArray.length; i++) {
                        newResourceArray.push({
                            name: "名称：" + (dataArray[i].resouceName ? dataArray[i].resouceName : "") + "      类型：" + (dataArray[i].resouceType ? getResourceNameByType(dataArray[i].resouceType) : "")
                            , warnstatus: 0
                            , data: [{
                                key: i, number: i
                                , warnstatus: dataArray[i].warnStatus ? dataArray[i].warnStatus : 0
                                , id: dataArray[i].id ? dataArray[i].id : ""
                                , appid: dataArray[i].appId ? dataArray[i].appId : ""
                                , IP: dataArray[i].resouceIp ? dataArray[i].resouceIp : ""
                                , cpu: dataArray[i].cpuRate ? dataArray[i].cpuRate : ""
                                , storage: dataArray[i].memoryRate ? dataArray[i].memoryRate : ""
                                , caliche: dataArray[i].disk ? dataArray[i].disk : ""
                                , network: dataArray[i].io ? dataArray[i].io : ""
                                , state: dataArray[i].serviceStatusName ? dataArray[i].serviceStatusName : ""
                                , updatetime: dataArray[i].currentDataTime ? this.getTimeByTemp(parseInt(dataArray[i].currentDataTime)) : ""
                            }]
                        });
                    }
                    this.setState({
                        resourceArray: newResourceArray
                    });
                }
            });
    }

    /**
     * 组件将被卸载
     */
    componentWillUnmount() {
        this.lock = true;
        //断开websocket
        if(this.ws !=null){
            this.ws.close();
        }
    }

    /**
     * 时间戳转时间格式
     * @returns {*}
     */
    getTimeByTemp(num){
        console.log(num);
        return moment(num).format('YYYY-MM-DD HH:mm:ss');
    }

    render() {
        return (
            <div>
                <BreadcrumbCustom first="资源监控" second="硬件监控" />

                <Collapse accordion bordered defaultActiveKey={['0']}>
                    {
                        this.state.resourceArray.map((item, index) => {
                            return (
                                <Panel header={item.name} key={index}>
                                    <Table className="tableResource" columns={this.state.columns0}
                                           dataSource={item.data} bordered pagination={false}/>
                                </Panel>
                            )
                        })
                    }
                </Collapse>
            </div>
        )
    }
}